﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <style type="text/css">
        .popover { min-width: 150px; }
        .error { border: 1px red dashed; }
        label.error { border: none; color: red; position: absolute; top: 8px; right: 25px; }
    </style>
</head>
<body>
    <div class="container" style="padding-top: 50px;">

        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">


                <div class="panel panel-default">
                    <div class="panel-body">
                        <form id="form1" method="POST" action="dd.php" class="form-horizontal">

                            <div class="form-group">
                                <label for="userName" class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名" data-toggle="tooltip" data-placement="top" title="请输入8 ~ 16位的用户名！">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="pwd" class="col-sm-3 control-label">密码：</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="twopwd" class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="twopwd" name="twopwd" placeholder="请再次输入密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email" class="col-sm-3 control-label">邮箱：</label>
                                <div class="col-sm-8">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="mobile" class="col-sm-3 control-label">手机号：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="zipCode" class="col-sm-3 control-label">邮编：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="zipCode" name="zipCode" placeholder="请输入邮政编号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="info" class="col-sm-3 control-label">简介：</label>
                                <div class="col-sm-8">
                                    <span class="glyphicon glyphicon-exclamation-sign" style="position: absolute; right: 0; top: -5px;" data-toggle="popover" data-placement="right" title="输入您的简介" data-content="个人简介示例： 1、基础体力500，基础法力200 2、一个完美的战士"></span>
                                    <textarea class="form-control" id="info" name="info" style="max-width: 431px; height: 150px; max-height: 150px;"></textarea>

                                </div>
                            </div>

                            <div class="form-group">

                                <div class="col-sm-8 col-sm-offset-2" style="text-align: right;">
                                    <button class="btn btn-default" type="button" id="btn">提交</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>


    </div>


    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/messages_zh.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();

            // 邮政编码验证
            jQuery.validator.addMethod("isZipCode", function (value, element) {
                var tel = /^[0-9]{6}$/;
                return this.optional(element) || (tel.test(value));
            }, "请正确填写您的邮政编码");

            $("#form1").validate({
                rules: {
                    userName: {
                        required: true,
                        remote: 'dd.php'
                    },
                    pwd: {
                        required: true
                    },
                    twopwd: {
                        required: true,
                        equalTo: '#pwd'
                    },
                    mobile: {
                        number: true
                    },
                    zipCode: {
                        isZipCode: true
                    }
                },
                messages: {
                    userName: {
                        required: "用户名不能为空",
                        remote: '用户名已经存在'
                    },
                    pwd: "密码不能为空",
                    zipCode: 'asdfasdf'
                },
                showErrors: function (errorMap, errorList) {
                    console.log(errorMap);
                    console.log(errorList);
                    this.defaultShowErrors();
                },
                submitHandler: function (form) {
                    alert("submit!");
                    form.submit();
                }
            });


            $('#btn').click(function () {
                //$("#form1").submit();
                $('#form1').valid();
            });


        });
    </script>


    <link rel="stylesheet" href="css/bootstrap-editable.css" />
    <script type="text/javascript" src="js/bootstrap-editable.js"></script>
    <script type="text/javascript">
        $('#e_userName').editable({
            type: 'text',
            mode: 'inline',//inline
            placement: 'top',

            url: 'dd.php',
            pk: 1
        });
        $('#e_name').editable();
        $('#e_code').editable();
        $('#e_email').editable();
        $('#e_sex').editable({
            type: 'select',
            value: 1,
            source: [
                { value: 0, text: '女' },
                { value: 1, text: '男' }
            ],
            error: function (response, value) {
                console.log(value);
                if (response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    return response.responseText;
                }
            }
        });
    </script>



</body>
</html>